@charset "utf-8";
/*reset*/

h1,h2,h3,h4,h5,p,ul,ol,li {
    padding:0;
    margin:0;
}


/*header部分*/

@yelCor: #ff841d;


//动画
@keyframes loading {
    25% {
        bottom:5px;
        opacity:.2;
    }
    50% {
        top:5px;
    }
    75% {
        bottom:5px;
    }
    100% {
        top:5px;
        opacity:.8;
    }
}
html {
    font-size: 100px;
}


/*header 部分*/
header {
    display: flex;
    background: @yelCor;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    padding: 0 10px;
    a:first-child {
        position:relative;
        height: 25px;
        h1 {
            text-indent:-99999em;
        }
        img {
            position:absolute;
            top:0;
            left:0;
            height: 100%;
        }
    }
    a:last-child {
        height: 34px;
        img {
            height: 100%;
        }
    }
}


/*search部分*/

.search {
    height: .5rem;
    background: white;
    padding: 10px;
    form {
        height: .3rem;
        input[type=button] {
            float: right;
            width: .6rem;
            height: .3rem;
            border-radius: 15px;
            color: white;
            font-size:.12rem;
            background: @yelCor;
        }
        label:first-of-type {
            display: block;
            overflow: hidden;
            padding-right: 7px;
            input {
                width: 100%;
                height: .3rem;
                font-size:.11rem;
                background: #F1F1F1;
                border-radius: 15px;
                padding-left: .15rem;
            }
        }
    }
}


/*nav 部分*/

.nav {
    margin: 10px 0;
    padding: 20px 0;
    background: white;
    div[class^=col] {
        padding:10px;
    }
    a {
        display: block;
        text-align: center;
        font-size: .12rem;
        overflow: hidden;
        img {
            width: 100%;
        }
        p {
            height:.15rem;
        }
    }
}


/*products部分*/
.products {
    background:white;
    .pro_header {
        height:.35rem;
        background:#ff9000;
        position:relative;
        padding:0 20px;
        h3 {
            font:400 .16rem/.35rem "microsoft yahei";
            color:white;
        }
        a {
            position:absolute;
            right:.20rem;
            top:.08rem;
            width:.20rem;
            img {
                width:100%;
            }
        }
    }
    ul {
        padding:0;
        li {
            // height:1.3rem;
            padding:20px 20px 0;
            border-bottom:1px solid #CCCCCC;
            overflow:hidden;
            a:first-child {
                float:left;
                img {
                    width:1rem;
                }
            }
            a:last-child {
                display:block;
                overflow:hidden;
                line-height:1.2;
                padding:5px;
                p:first-child {
                    font-size:.12rem;
                    height:.33rem;
                    overflow:hidden;
                    padding:5px 0;
                }
                p:nth-child(2) {
                    color:#E92322;
                    font-size:.12rem;
                    margin:5px 0;
                }
                p:last-child {
                    color:#666666;
                    font-size:.1rem;
                    height:.14rem;
                    overflow:hidden;
                    span {
                        float:right;
                        margin-left:4px;
                    }
                    img {
                        width:.15rem;
                        float:right;
                    }
                }
            }
            
        }
    }
    .pro_footer {
        height:.36rem;
        line-height:.36rem;
        text-align:center;
        button {
            width:90%;
            height:.30rem;
            line-height:.30rem;
            border-radius:10px;
            border:1px solid #ccc;
            background:white;
            font-size:.12rem;
            display:none;
        }
        span {
            width:.15rem;
            height:.15rem;
            background-color:dodgerblue;
            border-radius:50%;
            display:inline-block;
            margin:0 10px;
            position:relative;
        }
    }
}

//动画
span.loading {
    display:inline-block;
}
span.loading:nth-of-type(1) {
    animation:loading 1s infinite;
}
span.loading:nth-of-type(2) {
    animation:loading 1s .25s infinite;
}
span.loading:nth-of-type(3) {
    animation:loading 1s .50s infinite;
}
span.loading:nth-of-type(4) {
    animation:loading 1s .75s infinite;
}


/*rank 部分*/
.rank {
    height:.35rem;
    display:flex;
    justify-content:space-between;
    background:#FF9000;
    align-items:center;
    padding:0 20px;
    h3 {
        margin:0;
        font:400 .16rem/.35rem 'microsoft yahei';
        color:white;
    }
    img {
        width:.20rem;
    }
}


/*footer部分*/
footer {
    margin:10px 0;
    background:white;
    .footer_header {
        display:flex;
        >a {
            flex:1;
            height:.3rem;
            line-height:.3rem;
            text-align:center;
            font-size:.12rem;
            border:1px solid #ccc;
            img {
                width:.14rem;
            }
        }
    }
    >p {
        padding:0;
        text-align:center;
        height:30px;
        line-height:20px;
        font-size:.12rem;
        padding-top:5px;
        a:first-child {
            color:#FF0000;
        }
    }
    >p:first-of-type {
        margin-top:5px;
        + p {
            margin-top:-10px;
        }
    }
}





